<!--
 * @Author: Meow
 * @Date: 2019-11-20 10:13:16
 * @LastEditors: Meow
 * @LastEditTime: 2019-11-21 20:40:37
 * @Description: 添加流程节点弹出层
 -->
<template>
  <div id="Tabs" v-loading="loading">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="基本信息" name="first">
        <!-- tabs1:基本信息↓ -->
        <el-form :model="formData.skyBusiProceNodes[0]" label-width="100px">
          <el-form-item label="节点名称：">
            <el-input  v-model="formData.skyBusiProceNodes[0].nodeName"></el-input>
          </el-form-item>
          <el-form-item label="业务密级：">
            <el-select  v-model="formData.skyBusiProceNodes[0].secretLevel" placeholder="请选择">
              <el-option v-for="item in Options1" :key="item.dictName" :label="item.dictName" :value="item.dictName"></el-option>
            </el-select>
            <!-- <el-input     v-model="formData.skyBusiProceNodes[0].secretLevel"></el-input> -->
          </el-form-item>
          <el-form-item label="节点类型：">
            <el-select  v-model="formData.skyBusiProceNodes[0].nodeType" placeholder="请选择">
              <el-option v-for="item in Options2" :key="item.name" :label="item.name" :value="item.name"></el-option>
            </el-select>
            <!-- <el-input     v-model="formData.skyBusiProceNodes[0].nodeType"></el-input> -->
          </el-form-item>
          <el-form-item label="业务边界：">
            <el-input  v-model="formData.skyBusiProceNodes[0].businessBoundary"></el-input>
          </el-form-item>
          <el-form-item label="标签：">
            <treeselect  :multiple="true" :options="queryLabelTree" :flat="true" :default-expand-level="1" :normalizer="_normalizer" placeholder="选择标签"
              noOptionsText="暂无数据" noResultsText="没有找到匹配结果" noChildrenText="没有子节点" v-model="formData.skyBusiProceNodes[0].label" />
            <!-- <el-input     v-model="formData.skyBusiProceNodes[0].label"></el-input> -->
          </el-form-item>
        </el-form>
        <!-- tabs1:基本信息↑ -->
      </el-tab-pane>
      <!-- tabs2:执行单位 ↓-->
      <el-tab-pane label="执行单位" name="second">
        <div class="add-box">
          <el-button size="mini" type="primary" @click="add1">添加</el-button>
        </div>
        <el-table :data="formData.skyBusiExecDepartments" :header-cell-style="tableStyle" border>
          <el-table-column prop="unitName" label="单位名称" align="center"></el-table-column>
          <el-table-column prop="execOffice" label="执行处室" align="center"></el-table-column>
          <el-table-column label="操作" align="center" min-width="150">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="up1(scope.$index, scope.row)">修改</el-button>
              <el-button size="mini" @click="del1(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <!-- tabs2:执行单位 ↑-->
      <!-- tabs3:信息化系统 ↓-->
      <el-tab-pane label="信息化系统" name="third">
        <div class="add-box">
          <el-button size="mini" type="primary" @click="add2">添加</el-button>
        </div>
        <el-table :data="formData.skyBusiInforSystems" :header-cell-style="tableStyle" border style="width: 100%">
          <el-table-column prop="systemName" label="系统名称" align="center"></el-table-column>
          <el-table-column prop="execRole" label="执行角色" align="center"></el-table-column>
          <el-table-column label="操作" align="center" min-width="150">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="up2(scope.$index, scope.row)">修改</el-button>
              <el-button size="mini" @click="del2(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <!-- tabs3:信息化系统 ↑-->
      <!-- tabs4:上游节点 ↓-->
      <el-tab-pane label="上游节点" name="fourth">
        <div class="add-box">
          <el-button size="mini" type="primary" @click="add3">添加</el-button>
        </div>
        <el-table :data="formData.skyBusiUpstreamNodes" :header-cell-style="tableStyle" border style="width: 100%">
          <el-table-column prop="busiProceName" label="上游节点所属流程" align="center"></el-table-column>
          <el-table-column prop="parentNodeName" label="上游节点" align="center"></el-table-column>
          <el-table-column prop="accessParam" label="接入参数" align="center"></el-table-column>
          <el-table-column label="操作" align="center" min-width="150">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="up3(scope.$index, scope.row)">修改</el-button>
              <el-button size="mini" @click="del3(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <!-- tabs4:上游节点 ↑-->
      <!-- tabs5:输出参数 ↓-->
      <el-tab-pane label="输出参数" name="fifth">
        <div class="add-box">
          <el-button size="mini" type="primary" @click="add4">添加</el-button>
        </div>
        <el-table :data="formData.skyBusiOutputParams" :header-cell-style="tableStyle" border style="width: 100%">
          <el-table-column prop="paramTypeName" label="输出结果类型" align="center"></el-table-column>
          <el-table-column prop="systemName" label="所属系统" align="center"></el-table-column>
          <el-table-column prop="paramName" label="参数名称" align="center"></el-table-column>
          <el-table-column label="操作" align="center" min-width="150">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="up4(scope.$index, scope.row)">修改</el-button>
              <el-button size="mini" @click="del4(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <!-- tabs5:输出参数 ↑-->
      <!-- tabs6:业务规则 ↓-->
      <el-tab-pane label="业务规则" name="sixth">
        <div class="add-box">
          <el-button size="mini" type="primary" @click="add5">添加</el-button>
        </div>
        <el-table :data="formData.skyBusiRules" :header-cell-style="tableStyle" border style="width: 100%">
          <el-table-column prop="ruleType" label="规则类型" align="center"></el-table-column>
          <el-table-column prop="ruleSummary" label="规则概述" align="center"></el-table-column>
          <el-table-column prop="manageRule" label="治理规则" align="center"></el-table-column>
          <el-table-column label="操作" align="center" min-width="150">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="up5(scope.$index, scope.row)">修改</el-button>
              <el-button size="mini" @click="del5(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <!-- tabs6:业务规则 ↑-->
    </el-tabs>

    <!-- 弹出层 [执行单位的添加]↓-->
    <el-dialog append-to-body title="添加执行单位" :visible.sync="showDialog1" width="30%">
      <el-form label-width="80px">
        <el-form-item label="执行单位:">
          <el-select v-model="templateJson1.unitName" placeholder="请选择">
            <!-- 执行单位下拉框 -->
            <el-option v-for="item in Aoptions1" :key="item.name" :label="item.name" :value="item.name"></el-option>
          </el-select>
        </el-form-item>
        <!-- 执行处室下拉框 ※暂用input -->
        <!-- <el-select v-model="templateJson1.execOffice" placeholder="请选择">
          <el-option
            v-for="item in Aoptions2"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
          </el-select>-->
        <el-form-item label="执行处室:">
          <el-input v-model="templateJson1.execOffice"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="showDialog1 = false">取 消</el-button>
        <el-button type="primary" @click="sure1">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 弹出层 [执行单位的添加]↑ -->
    <!-- 弹出层 添加流程节点时:->[执行单位]->[修改]↓-->
    <el-dialog append-to-body title="添加执行单位" :visible.sync="showDialog11" width="30%">
      <el-form label-width="80px">
        <el-form-item label="执行单位:">
          <el-select v-model="templateJson1.unitName" placeholder="请选择">
            <el-option v-for="item in Aoptions1" :key="item.name" :label="item.name" :value="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="执行处室:">
          <el-input v-model="templateJson1.execOffice"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showDialog11 = false">取 消</el-button>
        <el-button type="primary" @click="update1">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 弹出层 添加流程节点时:->[执行单位]->[修改]↑-->

    <!-- 弹出层 [信息化系统的添加]↓-->
    <el-dialog append-to-body title="添加信息化系统" :visible.sync="showDialog2" width="30%">
      <el-form label-width="80px">
        <el-form-item label="系统名称:">
          <el-select v-model="templateJson2.systemName" placeholder="请选择">
            <!-- 执行单位下拉框 -->
            <el-option v-for="item in Boptions1" :key="item.system_name" :label="item.system_name" :value="item.system_name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="执行角色:">
          <el-input v-model="templateJson2.execRole"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showDialog2 = false">取 消</el-button>
        <el-button type="primary" @click="sure2">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 弹出层 [信息化系统的添加]↑ -->
    <!-- 弹出层 [信息化系统的修改]↓-->
    <el-dialog append-to-body title="添加信息化系统" :visible.sync="showDialog22" width="30%">
      <el-form label-width="80px">
        <el-form-item label="系统名称:">
          <el-select v-model="templateJson2.systemName" placeholder="请选择">
            <el-option v-for="item in Boptions1" :key="item.system_id" :label="item.system_name" :value="item.system_name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="执行角色:">
          <el-input v-model="templateJson2.execRole"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showDialog22 = false">取 消</el-button>
        <el-button type="primary" @click="update2">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 弹出层 [信息化系统的修改]↑ -->

    <!-- 弹出层 [上游节点的添加]↓-->
    <el-dialog append-to-body title="添加上游节点" :visible.sync="showDialog3" width="30%">
      <el-form ref="form" :model="templateJson3" label-width="80px">
        <el-form-item label="所属流程:">
          <el-input v-model="baseInfoData.busiProceName" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="上游节点:">
          <el-select v-model="templateJson3.parentNode" placeholder="请选择">
            <el-option v-for="item in Coptions2" :key="item.nodeId" :label="item.nodeName" :value="item.nodeId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="接入参数:">
          <el-input :disabled="true" v-model="templateJson3.accessParam"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showDialog3 = false">取 消</el-button>
        <el-button type="primary" @click="sure3">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 弹出层 [上游节点的添加]↑ -->
    <!-- 弹出层 [上游节点的修改]↓-->
    <el-dialog append-to-body title="添加上游节点" :visible.sync="showDialog33" width="30%">
      <el-form ref="form" :model="templateJson3" label-width="80px">
        <el-form-item label="所属流程:">
          <el-input v-model="baseInfoData.busiProceName" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="上游节点:">
          <el-select v-model="templateJson3.parentNode" placeholder="请选择">
            <el-option v-for="item in Coptions2" :key="item.nodeId" :label="item.nodeName" :value="item.nodeId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="接入参数:">
          <el-input :disabled="true" v-model="templateJson3.accessParam"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showDialog33 = false">取 消</el-button>
        <el-button type="primary" @click="update3">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 弹出层 [上游节点的修改]↑ -->

    <!-- 弹出层 [输出参数的添加]↓-->
    <el-dialog append-to-body title="添加输出结果" :visible.sync="showDialog4" width="30%">
      <el-form ref="form" :model="templateJson4" label-width="80px">
        <el-form-item label="参数类型:">
          <el-select v-model="templateJson4.paramType" placeholder="请选择" @change="ChangeParamsType">
            <el-option v-for="item in Doptions1" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属系统:" v-if="templateJson4.paramType!=2">
          <el-select v-model="templateJson4.systemId" placeholder="请选择" @change="ChangeSysId">
            <el-option v-for="item in Doptions2" :key="item.system_id" :label="item.system_name" :value="item.system_id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="参数名称:">
          <template v-if="templateJson4.paramType == 2">
            <el-input v-model="templateJson4.paramName"></el-input>
          </template>
          <template v-else>
            <el-select v-model="templateJson4.paramName" placeholder="请选择">
              <el-option v-for="item in Doptions3" :key="templateJson4.paramType==0?item.interface_id:item.file_id"
                :label="templateJson4.paramType==0?item.interface_name:item.file_name" :value="templateJson4.paramType==0?item.interface_name:item.file_name"></el-option>
            </el-select>
          </template>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showDialog4 = false">取 消</el-button>
        <el-button type="primary" @click="sure4">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 弹出层 [输出参数的添加]↑ -->
    <!-- 弹出层 [输出参数的修改]↓-->
    <el-dialog append-to-body title="添加输出结果" :visible.sync="showDialog44" width="30%">
      <el-form ref="form" :model="templateJson4" label-width="80px">
        <el-form-item label="参数类型:">
          <el-select v-model="templateJson4.paramType" placeholder="请选择" @change="ChangeParamsType">
            <el-option v-for="item in Doptions1" :key="item.name" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属系统:" v-if="templateJson4.paramType!=2">
          <el-select v-model="templateJson4.systemId" placeholder="请选择" @change="ChangeSysId">
            <el-option v-for="item in Doptions2" :key="item.system_id" :label="item.system_name" :value="item.system_id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="参数名称:">
          <template v-if="templateJson4.paramType == 2">
            <el-input v-model="templateJson4.paramName"></el-input>
          </template>
          <template v-else>
            <el-select v-model="templateJson4.paramName" placeholder="请选择">
              <el-option v-for="item in Doptions3" :key="templateJson4.paramType==0?item.interface_id:item.file_id"
                :label="templateJson4.paramType==0?item.interface_name:item.file_name" :value="templateJson4.paramType==0?item.interface_name:item.file_name"></el-option>
            </el-select>
          </template>
          <!-- <el-input v-model="templateJson4.paramName"></el-input> -->
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showDialog44 = false">取 消</el-button>
        <el-button type="primary" @click="update4">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 弹出层 [输出参数的修改]↑ -->

    <!-- 弹出层 [业务规则的添加]↓-->
    <el-dialog append-to-body title="添加业务规则" :visible.sync="showDialog5" width="30%">
      <el-form ref="form" :model="templateJson5" label-width="80px">
        <el-form-item label="规则类型:">
          <el-select v-model="templateJson5.ruleType" placeholder="请选择">
            <el-option v-for="item in Eoptions1" :key="item.name" :label="item.name" :value="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="规则概述:">
          <el-input v-model="templateJson5.ruleSummary"></el-input>
        </el-form-item>
        <el-form-item label="治理规则:">
          <el-input v-model="templateJson5.manageRule"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showDialog5 = false">取 消</el-button>
        <el-button type="primary" @click="sure5">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 弹出层 [业务规则的添加]↑ -->
    <!-- 弹出层 [业务规则的修改]↓-->
    <el-dialog append-to-body title="添加业务规则" :visible.sync="showDialog55" width="30%">
      <el-form ref="form" :model="templateJson5" label-width="80px">
        <el-form-item label="规则类型:">
          <el-select v-model="templateJson5.ruleType" placeholder="请选择">
            <el-option v-for="item in Eoptions1" :key="item.name" :label="item.name" :value="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="规则概述:">
          <el-input v-model="templateJson5.ruleSummary"></el-input>
        </el-form-item>
        <el-form-item label="治理规则:">
          <el-input v-model="templateJson5.manageRule"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showDialog55 = false">取 消</el-button>
        <el-button type="primary" @click="update5">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 弹出层 [业务规则的修改]↑ -->

  </div>
</template>
<script>
// 引入树选择器组件
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

import processManagementApi from "@/httpUtils/ExternalManagement/processManagement";
export default {
  name: "Tabs",
  components: {
    Treeselect
  },
  props: {
    // 基本信息
    baseInfoData: {
      type: Object,
      default: () => {}
    },
    // 是否禁止点击
    NodeDisabled: {
      type: Boolean,
      default: () => false
    },
    // 标签树
    queryLabelTree: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      // 流程节点表单是否加载中
      loading: false,
      // 表格头部样式
      tableStyle: {
        color: "#606266",
        background: "#eef1f6"
      },
      // 流程节点表单
      formData: {
        // 基本信息
        skyBusiProceNodes: [
          {
            nodeName: "", // 节点名称
            nodeType: "", //  节点类型
            businessBoundary: "", // 业务边界
            label: [], // 标签
            secretLevel: "", // 业务密级
            busiProceId: "", // 流程ID
            versionId: "" // 版本ID
          }
        ],
        // 执行单位
        skyBusiExecDepartments: [
          // {
          //   unitName: "自然资源局12",
          //   execOffice: "办公室12"
          // },
          // {
          //   unitName: "自然资源局22",
          //   execOffice: "办公室22"
          // }
        ],
        // 信息化系统
        skyBusiInforSystems: [
          // {
          //   systemName: "系统A12",
          //   execRole: "超级管理12员"
          // },
          // {
          //   systemName: "系统A22",
          //   execRole: "超级管理员22"
          // }
        ],
        // 上游节点
        skyBusiUpstreamNodes: [
          // {
          //   parentNode: "设计初设12",
          //   accessParam: "初设专题图层21",
          //   busiProceName: "当前业务流程名"
          // },
          // {
          //   parentNode: "设计初设22",
          //   accessParam: "初设专题图层22",
          //   busiProceName: "当前业务流程22"
          // }
        ],
        // 输出参数
        skyBusiOutputParams: [
          // {
          //   paramType: "接口21", // 参数类型
          //   systemName: "系统A21", // 所属系统
          //   paramName: "地名21" // 参数名称
          // },
          // {
          //   paramType: "接口22",
          //   systemName: "系统A22",
          //   paramName: "地名22"
          // }
        ],
        // 业务规则
        skyBusiRules: [
          // {
          //   ruleType: "参数接入规则21", // 规则类型
          //   ruleSummary: "测试21", // 规则概述
          //   manageRule: "测试21" // 治理规则
          // },
          // {
          //   ruleType: "参数接入规则22",
          //   ruleSummary: "测试22",
          //   manageRule: "测试22"
          // }
        ]
      },
      activeName: "first", // 当前弹出层
      // 业务密级下拉列表
      Options1: [],
      // 节点类型
      Options2: [
        { name: "实体节点" },
        { name: "判断节点" },
        { name: "线下节点" }
      ],
      showDialog1: false, // [执行单位]添加弹出层
      showDialog2: false, // [信息化系统]添加是否显示总弹出层
      showDialog3: false, // [上游节点]添加是否显示总弹出层
      showDialog4: false, // [输出参数]添加是否显示总弹出层
      showDialog5: false, // [业务规则]添加是否显示总弹出层
      showDialog11: false, // [执行单位]添加弹出层
      showDialog22: false, // [信息化系统]添加是否显示总弹出层
      showDialog33: false, // [上游节点]添加是否显示总弹出层
      showDialog44: false, // [输出参数]添加是否显示总弹出层
      showDialog55: false, // [业务规则]添加是否显示总弹出层
      // 执行单位模版
      templateJson1: {
        unitName: "", // 单位名称
        execOffice: "" // 执行处室
      },
      // 信息化系统模版
      templateJson2: {
        systemName: "", // 系统名称
        execRole: "" // 执行角色
      },
      // 上游节点模版
      templateJson3: {
        parentNode: "", // 上游节点id
        accessParam: "", // 接入参数
        busiProceName: "" // 上游节点所属流程名
        // busiProceId: "" // 上游节点所属流程ID
      },
      // 输出参数模版
      templateJson4: {
        paramType: "0", // 参数类型
        systemName: "", // 所属系统
        paramName: "" // 参数名称
      },
      // 业务规则模版
      templateJson5: {
        ruleType: "", // 规则类型
        ruleSummary: "", // 规则概述
        manageRule: "" // 治理规则
      },
      Aoptions1: [], // 单位名称下拉列表
      Aoptions2: [], // 执行处室下拉列表
      Boptions1: [], // 系统名称下拉列表
      Coptions1: [], // 上游节点所属流程下拉列表
      Coptions2: [], // 上游节点下拉列表
      Coptions3: [], // 上游节点下拉列表
      // 输出参数-参数类型下拉列表
      Doptions1: [
        { name: "接口", id: "0" },
        { name: "文件", id: "1" },
        { name: "其他", id: "2" }
      ],
      Doptions2: [], // 输出参数(所属系统下拉列表)
      Doptions3: [], // 参数名称
      // 输出参数-所属系统下拉列表
      Eoptions1: [{ name: "参数接入规则" }, { name: "异常处理规则" }]
    };
  },
  created() {
    console.log(this.baseInfoData);
    console.log(this.NodeDisabled);
    this.formData.skyBusiProceNodes[0].busiProceId = this.baseInfoData.busiProceId;
    this.formData.skyBusiProceNodes[0].versionId = this.baseInfoData.versionId;
    this.GetOptions1(); // 获取业务密级列表
  },
  methods: {
    // 添加节点
    AddNode() {
      this.loading = true;
      console.log(this.baseInfoData);
      console.log(this.formData);

      let formatObj = JSON.parse(JSON.stringify(this.formData));
      let label = formatObj.skyBusiProceNodes[0].label;
      if (label != null && label != "") {
        formatObj.skyBusiProceNodes[0].label = label.join(",");
      } else {
        formatObj.skyBusiProceNodes[0].label = "";
      }
      console.log(this.formData.skyBusiProceNodes[0].label);
      console.log(formatObj.skyBusiProceNodes[0].label);
      processManagementApi.addBusiProceNode(formatObj).then(res => {
        console.log("添加流程节点", res.data);
        if (res.data.code == 200) {
          this.$message.success("添加流程节点成功");
          this.loading = false;
          this.$emit("func", res.data.code);
          // this.GetNode();
        } else {
          this.$message.error("添加流程节点失败");
          this.loading = false;
          this.$emit("func", res.data.code);
        }
        // this.showDialog = false; // 关闭流程节点弹出层
      });
    },
    // 标签配置
    _normalizer(node) {
      return {
        id: node.id,
        label: node.name,
        children: node.child
      };
    },
    // 获取业务密级列表
    GetOptions1() {
      processManagementApi
        .queryDictInfoByType({
          typeCode: "1000001020219608"
        })
        .then(res => {
          console.log(" 获取业务密级下拉列表数据", res.data.data);
          this.Options1 = res.data.data;
        });
    },

    // -- 执行单位添加
    add1() {
      this.showDialog1 = true;
      this.GetAoptions();
      this.templateJson1 = {
        unitName: "", // 单位名称
        execOffice: "" // 执行处室
      };
    },
    // -- 信息化系统添加
    add2() {
      this.showDialog2 = true;
      this.GetBoptions();
      this.templateJson2 = {
        systemName: "", // 系统名称
        execRole: "" // 执行角色
      };
    },
    // -- 上游节点添加
    add3() {
      this.showDialog3 = true;
      this.templateJson3.busiProceId = this.baseInfoData.busiProceId; // 所属流程的ID
      this.templateJson3.busiProceName = this.baseInfoData.busiProceName; // 所属流程的Name
      this.GetCoptions2(); // 获取上游节点下拉列表
    },
    // -- 输出参数添加
    add4() {
      this.showDialog4 = true;
      this.GetBoptions(); // 获取所属系统下拉列表
    },
    // -- 业务规则添加
    add5() {
      this.showDialog5 = true;
    },
    // -- 执行单位删除
    del1(index, row) {
      this.formData.skyBusiExecDepartments.splice(index, 1);
    },
    // -- 信息化系统删除
    del2(index, row) {
      this.formData.skyBusiInforSystems.splice(index, 1);
    },
    // -- 上游节点删除
    del3(index, row) {
      console.log(index, row);
      this.formData.skyBusiUpstreamNodes.splice(index, 1);
    },
    // -- 输出参数删除
    del4(index, row) {
      this.formData.skyBusiOutputParams.splice(index, 1);
    },
    // -- 业务规则删除
    del5(index, row) {
      this.formData.skyBusiRules.splice(index, 1);
    },

    // 添加执行单位 确定按钮
    sure1() {
      this.formData.skyBusiExecDepartments.push(this.templateJson1);
      // 清空执行单位模版数据
      this.templateJson1 = {
        unitName: "", // 单位名称
        execOffice: "" // 执行处室
      };
      this.showDialog1 = false; // 关闭添加执行单位弹出层
    },
    // 添加信息化 确定按钮
    sure2() {
      this.formData.skyBusiInforSystems.push(this.templateJson2);
      console.log(this.formData);
      // 清空执行单位模版数据

      this.templateJson2 = {
        systemName: "", // 系统名称
        execRole: "" // 执行角色
      };

      this.showDialog2 = false; // 关闭添加执行单位弹出层
    },
    // 添加上游节点|点击[确定]按钮 触发
    sure3() {
      if (this.templateJson3.parentNode) {
        let obj = {};
        obj = this.Coptions2.find(item => {
          return item.nodeId == this.templateJson3.parentNode;
        });
        this.templateJson3.parentNodeName = obj.nodeName;
      }
      this.formData.skyBusiUpstreamNodes.push(this.templateJson3);
      // 清空执行单位模版数据
      this.templateJson3 = {
        parentNode: "", // 上游节点的id
        parentNodeName: "", // 上游节点的Name
        accessParam: "", // 接入参数
        busiProceId: "", // 上游节点所属流程ID
        busiProceName: "" // 上游节点所属流程Name
      };
      this.templateJson3.busiProceName = this.busiProceName; // 清空模版后重新赋值流程Name
      this.templateJson3.busiProceId = this.busiProceId; // 清空模版后重新赋值流程ID
      this.showDialog3 = false; // 关闭添加执行单位弹出层
    },
    // 输出参数 确定按钮
    sure4() {
      this.formData.skyBusiOutputParams.push(this.templateJson4);
      console.log(this.formData);
      // 清空执行单位模版数据
      this.templateJson4 = {
        paramType: "0", // 参数类型
        systemId: "", // 所属系统
        systemName: "", // 所属系统
        paramName: "" // 参数名称
      };
      this.showDialog4 = false; // 关闭添加执行单位弹出层
    },
    // 业务规则确定按钮
    sure5() {
      this.formData.skyBusiRules.push(this.templateJson5);
      console.log(this.formData);
      // 清空执行单位模版数据
      this.templateJson5 = {
        ruleType: "", // 规则类型
        ruleSummary: "", // 规则概述
        manageRule: "" // 治理规则
      };
      this.showDialog5 = false; // 关闭添加执行单位弹出层
    },

    // 改变参数类型
    ChangeParamsType(data) {
      console.log(this.templateJson4);
      this.templateJson4.paramName = "";
      let obj = {};
      obj = this.Doptions1.find(item => {
        return item.id == data;
      });

      this.templateJson4.paramTypeName = obj.name;

      console.log("所选择的参数名称的id", data);
      if (data == 2) {
        this.templateJson4.systemId = ""; // 选择了 其他(值为2) 清空所属系统id传值
        this.templateJson4.systemName = ""; // 选择了 其他(值为2) 清空所属系统id传值
      } else {
        if (this.templateJson4.systemId) {
          let params = {};
          params.type = data; // 接口类型: 0/1/2
          params.sysId = this.templateJson4.systemId; // 传参所属系统id
          // 获取参数名称列表
          processManagementApi
            .MetaDataRegisterfindFileOrIterface(params)
            .then(res => {
              console.log(" 获取参数名称列表------", res.data.data);
              this.Doptions3 = res.data.data;
            });
        }
      }
    },
    // [输出参数] 改变系统id
    ChangeSysId(data) {
      this.templateJson4.paramName = "";
      let obj = {};
      obj = this.Boptions1.find(item => {
        return item.system_id == data;
      });
      this.templateJson4.systemName = obj.system_name;
      let params = {};
      params.sysId = data; // 传参所属系统id
      params.type = this.templateJson4.paramType;
      // 获取参数名称列表
      processManagementApi
        .MetaDataRegisterfindFileOrIterface(params)
        .then(res => {
          console.log(" 获取参数名称列表------", res.data.data);
          this.Doptions3 = res.data.data;
        });
    },

    // ------------------------添加流程节点前-修改详情信息
    // 添加流程节点->执行单位->点击修改->弹窗显示
    up1(index, row) {
      this.showDialog11 = true; // 显示添加执行单位弹出层
      this.currentIndex = index;
      this.templateJson1 = JSON.parse(JSON.stringify(row));
    },
    // 点击执行单位[确定]->确认修改
    update1() {
      this.formData.skyBusiExecDepartments.splice(
        this.currentIndex,
        1,
        this.templateJson1
      );
      // 清空执行单位模版数据
      this.currentIndex = 0;
      this.templateJson1 = {
        unitName: "", // 单位名称
        execOffice: "" // 执行处室
      };
      this.showDialog11 = false; // 关闭添加执行单位弹出层
    },
    // 添加流程节点->信息化系统->点击修改->弹窗显示
    up2(index, row) {
      this.showDialog22 = true; // 显示添加执行单位弹出层
      this.currentIndex = index;
      this.templateJson2 = JSON.parse(JSON.stringify(row));
    },
    // 点击执行单位[确定]->确认修改
    update2() {
      this.formData.skyBusiInforSystems.splice(
        this.currentIndex,
        1,
        this.templateJson2
      );
      // 清空模版
      this.currentIndex = 0;
      this.templateJson2 = {
        systemName: "", // 系统名称
        execRole: "" // 执行角色
      };
      this.showDialog22 = false; // 关闭添加执行单位弹出层
    },
    // 添加流程节点->上游节点->点击修改->弹窗显示
    up3(index, row) {
      this.showDialog33 = true; // 显示添加执行单位弹出层
      this.currentIndex = index;
      this.templateJson3 = JSON.parse(JSON.stringify(row));
    },
    // 点击上游节点[确定]->确认修改
    update3() {
      if (this.templateJson3.parentNode) {
        let obj = {};
        obj = this.Coptions2.find(item => {
          return item.nodeId == this.templateJson3.parentNode;
        });
        this.templateJson3.parentNodeName = obj.nodeName;
      }

      this.formData.skyBusiUpstreamNodes.splice(
        this.currentIndex,
        1,
        this.templateJson3
      );
      // 清空模版
      this.currentIndex = 0;
      this.templateJson3 = {
        parentNode: "", // 上游节点
        accessParam: "", // 接入参数
        busiProceName: "", // 上游节点所属流程Name
        busiProceId: "" // 上游节点所属流程ID
      };
      this.templateJson3.busiProceName = this.busiProceName; // 清空模版后重新赋值流程Name
      this.templateJson3.busiProceId = this.busiProceId; // 清空模版后重新赋值流程ID
      this.showDialog33 = false; // 关闭添加执行单位弹出层
    },
    // 添加流程节点->输出参数->点击修改->弹窗显示
    up4(index, row) {
      this.showDialog44 = true; // 显示添加执行单位弹出层
      this.currentIndex = index;
      this.templateJson4 = JSON.parse(JSON.stringify(row));
    },
    // 点击输出参数[确定]->确认修改
    update4() {
      this.formData.skyBusiOutputParams.splice(
        this.currentIndex,
        1,
        this.templateJson4
      );
      // 清空模版
      this.currentIndex = 0;
      let tpye = this.templateJson4.paramType;
      this.templateJson4 = {
        paramType: tpye, // 参数类型
        systemName: "", // 所属系统Name
        systemId: "", // 所属系统Id
        paramName: "" // 参数名称
      };
      this.showDialog44 = false; // 关闭添加执行单位弹出层
    },
    // 添加流程节点->业务规则->点击修改->弹窗显示
    up5(index, row) {
      this.showDialog55 = true; // 显示添加执行单位弹出层
      this.currentIndex = index;
      this.templateJson5 = JSON.parse(JSON.stringify(row));
    },
    // 点击业务规则[确定]->确认修改
    update5() {
      this.formData.skyBusiRules.splice(
        this.currentIndex,
        1,
        this.templateJson5
      );
      // 清空模版
      this.currentIndex = 0;
      this.templateJson5 = {
        ruleType: "", // 规则类型
        ruleSummary: "", // 规则概述
        manageRule: "" // 治理规则
      };
      this.showDialog55 = false; // 关闭添加执行单位弹出层
    },

    // 添加信息化系统时:获取系统名称下拉列表
    GetAoptions() {
      // 获取单位名称下拉列表
      processManagementApi.findOrgCatalogTree().then(res => {
        console.log(" 获取单位名称下拉列表----", res.data.data);
        this.Aoptions1 = res.data.data;
      });
    },
    // --获取系统名称下拉列表数据
    GetBoptions() {
      processManagementApi.findAllSys().then(res => {
        console.log(" 获取系统名称下拉列表数据----", res.data.data);
        this.Boptions1 = res.data.data;
        this.Doptions2 = res.data.data;
      });
    },
    // 获取上游节点列表
    GetCoptions2() {
      // let busiProceID = this.formData2.skyBusiProceNodes[0].busiProceId;
      let busiProceId = this.baseInfoData.busiProceId;
      processManagementApi
        .findBusiNodeByVersionId({ busiProceId: busiProceId })
        .then(res => {
          console.log(" 获取该流程所有节点列表", res.data.data.list);
          this.Coptions2 = res.data.data.list;
        });
    },

    // --点击[返回]
    back() {
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="less" scoped>
.el-tabs {
  overflow: visible !important;
}
/deep/.el-tabs__content {
  overflow: visible !important;
}
@import url("../ProcessManagement.less");
</style>